<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>老师报名</title>
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <meta http-equiv="x-dns-prefetch-control" content="on">
    <link rel="stylesheet" href="/static/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="/static/layui/css/layui.css">
    <link rel="stylesheet" href="/static/teacher/css/font-awesome.min.css">
    <link rel="stylesheet" href="/static/teacher/css/teacher.css?{:rand(10000,1000000)}">
    <link  href="/static/teacher/cropper/cropper.css" rel="stylesheet">
    <script src="/static/js/jquery-1.11.3.min.js"></script>
    <script src="/static/js/bootstrap.min.js"></script>
    <script src="/static/layui/layui.all.js"></script>
    <script src="/static/teacher/js/cropper.js"></script>
    <script src="/static/teacher/cropper/jquery-cropper.js"></script>
    <script src="/static/teacher/js/teacher.js?{:rand(10000,1000000)}"></script>
    <script src="/static/teacher/js/main.js?{:rand(10000,1000000)}"></script>
</head>
<body>
<form class="form-register">
    <div class="canvas-box">
        <canvas width="750" height="750" id="canvas"></canvas>
    </div>

    <div class="form-group">
        <div id="upload" class="btn btn-default btn-upload upload">上传照片</div>
        <input class="avatar-input hide" id="inputImage" name="file" type="file" accept="image/*">
        <img id="selected" src="" alt="" class="hide">
    </div>

    <div class="form-group">
        <label for="name">输入姓名 <span class="text-danger">(仅限4个字符)</span></label>
        <input type="text" maxlength="4" class="form-control" id="name" placeholder="输入姓名">
    </div>
    <div class="form-group">
        <label for="position">输入岗位，如课程顾问老师 <span class="text-danger">(仅限6个字符)</span></label>
        <input type="text" maxlength="6" class="form-control" id="position" placeholder="输入岗位，如课程顾问老师">
    </div>
    <div class="form-group">
        <div id="preview" class="btn btn-success btn-register">预览</div>
    </div>
    <div class="form-group">
        <a class="btn btn-primary btn-full" id="todownload" download="shangkong.png">合成</a>
    </div>
</form>

<div id="created">
    <div id="created-box">
        <div class="image-box"></div>
        <div class="tips">长安保存头像</div>
    </div>
</div>

<div class="modal fade in" id="avatar-modal" aria-hidden="false" aria-labelledby="avatar-modal-label" role="dialog" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-body">
                <div class="img-container">
                    <img id="image" src=""/>
                </div>
            </div>
            <div class="modal-footer">

                <div class="btn-group btn-group-tool" style="margin-bottom: 12px;width: 100%">
                    <div class="btn btn-danger fa fa-arrows-alt" data-method="setDragMode" data-option="move" title="移动"></div>
                    <div class="btn btn-danger fa fa-undo" data-method="rotate" data-option="-90" title="向左旋转"></div>
                    <div class="btn btn-danger fa fa-repeat" data-method="rotate" data-option="90" title="向右旋转"></div>
                    <div class="btn btn-danger fa fa-search-plus" data-method="zoom" data-option="0.1" title="放大图片"></div>
                    <div class="btn btn-danger fa fa-search-minus" data-method="zoom" data-option="-0.1" title="缩小图片"></div>
                    <div class="btn btn-danger fa fa fa-upload upload" data-method="upload" title="重新上传"></div>
                </div>

                <div class="btn-group-tool">
                    <div class="btn btn-danger btn-full" data-method="getCroppedCanvas">确定</div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>